<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button @click="click">
      {{ state.message }}
      </button>
  </div>
  <!-- <script src="https://libs.cdnjs.net/vue/3.0.0-rc.5/vue.global.js"></script> -->
  <script src="./vue.global.js"></script>
  <script>
      // watchEffect
      // 它会先执行一次这个函数
      // 如果在它的函数代码中使用到了响应式数据，则它会自动成为这个响应式数据的观察者
      const { createApp, reactive, watchEffect } = Vue
      const App = {
        setup() {
          const state = reactive({
              message:'Hello Vue 3!!'
          })
          watchEffect(() => {
              console.log('state change1 ', state.message)
          })

          watchEffect(() => {
              console.log('state change2 ', state.message)
          })
          function click() {
              state.message = state.message.split('').reverse().join('')
          }
          return {
              state,
              click
          }
        }
      }
      createApp(App).mount('#app')
  </script>
</body>
</html>